<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1{
			width: 400px;
			height: 400px;
			background-color: black;
		}
		#div2{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		#div3{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		#div4{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		div{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
	<body>
<!-- 		4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			....
		      5.查找每个DIV的子元素和子对象 -->
			<div id="div1">
				<label>一二三四</label>
				<div id="div2">
					<p>标题</p>
					<div id="div3">
						<a href="http://www.baidu.com">a标签进百度</a>
						<div id="div4">
							<img src="../img/%7D$ATTN0C~_DADYN8X_Q$RON.jpg" style="width: 100px; height: 100px;">
						</div>
					</div>
				</div>
			</div>
			<button type="button" onclick="getfindfather();">查询父元素和父节点</button>
			<br />
			<button type="button" onclick="getfindson();">查询子元素和子节点</button>
	</body>
	<script type="text/javascript">
		function getfindfather(){
			console.log('查询父元素和父节点');
			console.log('一级父元素为(',(div4.parentElement),')');
			console.log('一级父节点为(',(div4.parentNode),')')
			console.log('二级父元素为(',(div4.parentElement.parentElement),')');
			console.log('二级父节点为(',(div4.parentNode.parentNode),')')
			console.log('三级父元素为(',(div4.parentElement.parentElement.parentElement),')');
			console.log('三级父节点为(',(div4.parentNode.parentNode.parentNode),')')
			console.log('四级父元素为(',(div4.parentElement.parentElement.parentElement.parentElement),')');
			console.log('四级父节点为(',(div4.parentNode.parentNode.parentNode.parentNode),')')
			console.log('五级父元素为(',(div4.parentElement.parentElement.parentElement.parentElement.parentElement),')');
			console.log('五级父节点为(',(div4.parentNode.parentNode.parentNode.parentNode.parentNode),')')
		}
		function getfindson(){
			console.log('查询子元素和子节点');
			console.log('一级子元素为(',(console.log(document.getElementById('div1').children)),')');
			console.log('一级子节点为(',(console.log(document.getElementById('div1').childNodes)),')');
			console.log('二级子元素为(',(console.log(document.getElementById('div2').children)),')');
			console.log('二级子节点为(',(console.log(document.getElementById('div2').childNodes)),')');
			console.log('三级子元素为(',(console.log(document.getElementById('div3').children)),')');
			console.log('三级子节点为(',(console.log(document.getElementById('div3').childNodes)),')');
			console.log('四级子元素为(',(console.log(document.getElementById('div4').children)),')');
			console.log('四级子节点为(',(console.log(document.getElementById('div4').childNodes)),')');
		}
	</script>
</html>
